<template>
  <div class="guns-layout">
    <div class="guns-layout-content">
      <div class="guns-layout">
        <div class="guns-layout-content-application">
          <div class="content-mian">
            <div class="content-mian-header">
              <div class="header-content">
                <div class="header-content-left">
                  <a-space :size="16">
                    <a-input
                      v-model:value="where.searchText"
                      placeholder="姓名、病案号（回车搜索 ）"
                      @pressEnter="reload"
                      class="search-input"
                    >

                      <template #prefix>
                        <icon-font iconClass="icon-opt-search"></icon-font>
                      </template>
                    </a-input>
                    <drop-down
                        :list="diseaseList"
                        dropName="病种"
                        ref="diseaseRef"
                        keyValue="dictCode"
                        keyName="dictName"
                        @dropClick="diseaseChange"
                    />
                    <a-button class="border-radius" @click="clear">重置</a-button>
                  </a-space>
                </div>
                <div class="header-content-right">
                  <a-space :size="16">
                    <a-button type="primary" class="border-radius" @click="openAddEdit()" v-permission="['ADD_POSITION']"
                      ><plus-outlined />新建</a-button
                    >

                    <a-dropdown>
                      <template #overlay>
                        <a-menu @click="moreClick">
                          <a-menu-item key="1">
                            <icon-font iconClass="icon-opt-zidingyilie" color="#60666b"></icon-font>
                            <span>自定义列</span>
                          </a-menu-item>
<!--                          <div v-permission="['DELETE_POSITION']">
                            <a-menu-item key="2">
                              <icon-font iconClass="icon-opt-shanchu" color="#60666b"></icon-font>
                              <span>批量删除</span>
                            </a-menu-item>
                          </div>-->
                        </a-menu>
                      </template>
                      <a-button class="border-radius">
                        更多
                        <small-dash-outlined />
                      </a-button>
                    </a-dropdown>
                  </a-space>
                </div>
              </div>
            </div>
            <div class="content-mian-body">
              <div class="table-content">
                <a-row :gutter="20">
                  <a-col v-for="record in columns"  :span="4">
                <a-card hoverable style="width: 200px">
                  <template #cover>
                    <img
                        alt="example"
                        :src="record.sex=='M'?'../src/assets/male.png':'../src/assets/female.png'"
                    />
                  </template>

                  <a-card-meta :title="'&nbsp;姓&nbsp;&nbsp;名&nbsp;：'+record.name">
                  </a-card-meta>
                  <a-card-meta :title="'病案号：'+record.inNo">
                  </a-card-meta>
                  <a-card-meta :title="'单病种：'+record.diseaseName">
                  </a-card-meta>
                  <a-button type="primary" shape="round" style="margin-left: 40px;margin-top: 20px" @click="openAddEdit(record)">上报</a-button>
                </a-card>
                  </a-col>
                </a-row>
              </div>
              <div class="table-content">

                <a-pagination
                    v-model:current="current"
                    v-model:page-size="pageSize"
                    :page-size-options="pageSizeOptions"
                    :total="total"
                    show-size-changer
                    @showSizeChange="onShowSizeChange"
                >
                  <template #buildOptionText="props">
                    <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
                    <span v-else>全部</span>
                  </template>
                </a-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>



    <!-- 新增编辑弹框 -->
    <PatientAddEdit v-model:visible="showEdit" v-if="showEdit" :data="currentData" @done="reload" />
  </div>
</template>

<script  name="Position">
import { PatientApi } from './api/PatientApi';
import {ref, createVNode, onMounted, onBeforeMount, reactive, defineComponent, toRefs} from 'vue';
import { message, Modal } from 'ant-design-vue/es';
import PatientAddEdit from './components/patient-add-edit.vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { CustomApi } from '@/components/common/Custom/api/CustomApi';
import { SysDictDataApi } from '@/components/DictSelect/api/SysDictDataApi';
export default defineComponent({
  components: {PatientAddEdit},
  setup() {
    const pageSizeOptions = ref(['30', '60',  '100']);
    const current = ref(1);
    const pageSizeRef = ref(30);
    const total = ref(50);
    let data = reactive({
      where:{
        searchText:"",
      },
      showEdit:false,
      columns:[],
      diseaseList:[],
      currentData:{}
    });
    const getDictData = () => {
      PatientApi.findDictList({ dictTypeId: '1813510904349069313' }).then(res => {
        data.diseaseList = res.data;
      });
    };
    onMounted(async () => {
      getDictData();
      reload();
    });
    const onShowSizeChange = (current, pageSize) => {
      console.log(current, pageSize);
      pageSizeRef.value = pageSize;
    };
    const diseaseChange = val => {
      where.diseaseCode = val;
      reload();
    };
    // 点击搜索
    const reload = () => {
      PatientApi.findPage({ pageNo: current.value, pageSize:pageSizeRef.value}).then(res => {

        data.columns = res.rows;
        total.value = res.totalRows
      });
    };
    const openAddEdit = record => {
      console.log("record:"+JSON.stringify(data.record))
      for(let i = 0; i < data.diseaseList.length; i ++) {
        if (record.diseaseCode ==  data.diseaseList[i].dictCode) {
          record["diseaseName"]=data.diseaseList[i].dictName
        }
      }
      data.currentData = record;
      data.showEdit = true;
      console.log("currentData:"+JSON.stringify(data.currentData))
    };
    return {
      ...toRefs(data),
      openAddEdit,
      reload,
      getDictData,
      diseaseChange,
      pageSizeOptions,
      current,
      pageSize: pageSizeRef,
      total,
      onShowSizeChange,
    };

// ref
    const tableRef = ref(null);
    const diseaseRef = ref(null);


// 是否显示自定义列
    const isShowCustom = ref(false);
// 当前行数据
//    const current = ref(null);
// 是否显示新增编辑弹框
    const showEdit = ref(false);
// 业务标识的编码
    const fieldBusinessCode = ref('PATIENT_TABLE');

    onBeforeMount(() => {
      getDictData();
    });
    onMounted(() => {
      getColumnData();
      // getDictData();
    });



// 获取表格配置
    const getColumnData = () => {
      CustomApi.getUserConfig({ fieldBusinessCode: fieldBusinessCode.value }).then(res => {
        if (res.tableWidthJson) {
          columns.value = JSON.parse(res.tableWidthJson);
        }
      });
    };

// 更多点击
    const moreClick = ({ key }) => {
      if (key == '1') {
        isShowCustom.value = true;
      } else if (key == '2') {
        batchDelete();
      }
    };



// 清除搜索条件
    const clear = () => {
      where.value.searchText = '';
      diseaseRef.value.changeDropname('病种');
      reload();
    };

// 新增编辑点击


// 删除单个
    const remove = record => {
      Modal.confirm({
        title: '提示',
        content: '确定要删除选中的职位吗?',
        icon: createVNode(ExclamationCircleOutlined),
        maskClosable: true,
        onOk: async () => {
          const res = await PatientApi.delete({ positionId: record.positionId });
          message.success(res.message);
          reload();
        }
      });
    };

// 批量删除
    const batchDelete = () => {
      if (tableRef.value.selectedRowList && tableRef.value.selectedRowList.length == 0) {
        return message.warning('请选择需要删除的职位');
      }
      Modal.confirm({
        title: '提示',
        content: '确定要删除选中的职位吗?',
        icon: createVNode(ExclamationCircleOutlined),
        maskClosable: true,
        onOk: async () => {
          const res = await PatientApi.batchDelete({ positionIdList: tableRef.value.selectedRowList });
          message.success(res.message);
          reload();
        }
      });
    };

  },
});

</script>

<style scoped lang="less"></style>
